<!--
 * @Author: wangshuixin 2412658453@qq.com
 * @Date: 2025-04-03 14:46:16
 * @LastEditors: wangshuixin 2412658453@qq.com
 * @LastEditTime: 2025-06-27 16:33:07
 * @FilePath: \my-app\src\pages\index\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="content">
    <view class="bg-blue-500 text-white p-4">
      Tailwind 测试
      <button @click="toggleColorMode">
        {{ colorMode?.preference === 'dark' ? '切换浅色' : '切换深色' }}
      </button>
      <p>当前模式: {{ colorMode?.preference }}</p>
      <view class="h-[100px] bg-red-300 dark:bg-dark-900">
        深色模式下背景会变暗
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const colorMode = ref(true);

// const colorMode = useColorMode();
const toggleColorMode = () => {
//   if (process.client) {
//     colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
//   }
}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
